<template>
    <div id="login">
        <h1>物流管理平台</h1>
        <el-form label-width="100px" :model="data" id="form" :rules="rules" ref="ruleForm">
            <el-form-item prop="phone" label="请输入手机号" class="form-item">
                <el-input v-model="data.phone" maxlength="11"  placeholder="手机号"/>
            </el-form-item>
            <el-form-item prop="password" label="请输入密码" class="form-item">
                <el-input type="password"  v-model="data.password" autocomplete="off" placeholder="6-16位密码，区分大小写"/>
            </el-form-item>
            <el-form-item calss="button">
                <el-button @click.prevent="login" class="button">
                    登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {Form, FormItem, Input, Button} from "element-ui";
    import {post} from "../../request/AxiosMAX";


    export default {
        created() {

        },
        name: "Login",
        components: {
            "el-form": Form,
            "el-form-item": FormItem,
            "el-input": Input,
            "el-button": Button
        },
        data() {

            let validatePhone = (rule, value, callback) =>{
                const $reg = /^1[3-9]\d{9}$/;
                if (value === ''){
                    callback(new Error('手机号不能为空'))
                }else if (!$reg.test(value)){
                    callback(new Error('手机号格式错误'))
                }
                else callback();

            };
            let validateVerificationCode = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('验证码不能为空'));
                }else if (!(value.length===4)){
                    callback(new Error('验证码长度小于4'));
                }
                else callback();
            };

            let validatePass = (rule, value, callback) => {
                const $regPass = /^[a-z0-9]{6,16}$/;
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else if (!$regPass.test(value)) {
                    setTimeout(() => callback(new Error('输入的密码不合法')), 100);
                }
            };
            return {
                user:{},
                disabled1: false,
                num1: 60,
                data: {

                    //手机号
                    phone: '',
                    password: '',

                },
                rules: {
                    captcha:[
                        {validator: validateVerificationCode, trigger: 'blur'}
                    ],
                    phone: [
                        {validator: validatePhone, trigger: 'blur'}
                    ],
                    password: [
                        {validator: validatePass, trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {

            login() {

                post("/api/admin/login/",
                    {
                        password: this.data.password,
                        phone: this.data.phone
                    }

                    )
                    .then(res => {
                        if (res.code === 0) {
                            //token
                            localStorage.setItem("token", res.data);
                            this.$router.push("/admin/BaseManage");
                        } else {
                            this.$message({
                                message: '手机号或密码错误',
                                type: 'error'
                            });
                        }
                    }).catch(err => {
                    console.info(err);
                    this.$message({
                        message: '网络错误',
                        type: 'error'
                    });
                })
            }
        }
    }
</script>

<style scoped>
    #login {
        position: relative;
        width: 500px;
        height: 400px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, 50%);
    }

    #form {
        margin-left: -120px;
        margin-top: 30px;
    }

    /deep/ .form-item {
        width: 500px;
        margin-top: 10px;
        margin-bottom: 40px;
    }

    /deep/ #select {
        width: 400px !important;
    }

    /deep/ .button {
        width: 300px;
        margin-left: 20px;
    }

    .form-item1 {
        width: 400px;
    }

</style>
